<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>官方社区</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/editormd.css">
    <link rel="stylesheet" href="css/log.css">
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/community.js"></script>
    <script src="/js/question.js"></script>
    <script src="/js/editormd.min.js"></script>
    <link rel="stylesheet" href="/css/community.css">
</head>

<script>

    $(document).ready(function(){
        // // 实时显示输入的标签
        // var text = $("#tag").val();
        //
        // $("#tag").keydown(function(){
        //     $("#tagspan").text($("#tag").val());
        // });
        // $("#tag").keyup(function(){
        //     $("#tagspan").text($("#tag").val());
        // });

        $("#title").blur(function(){
                if($("#title").val()==""){
                    $("#titlespan").text("Please Improving title");
                }
            });
        $("#description").blur(function(){
                if($("#description").val()==""){
                    $("#desspan").text("Please Improving description");
                }
            });
        // $("#tag").blur(function(){
        //         if($("#tag").val()==""){
        //             $("#tagspan").text("Please Improving tag");
        //         }
        //     });
        $("#title").focus(function(){
            $("#error").css("display","none");
        });
        $("#description").focus(function(){
            $("#error").css("display","none");
        });
        $("#tag").focus(function(){
            $("#error").css("display","none");
        });
    });

    // function reset(){
    //     alert("lalas");
    //     $("#question_freamwork")[0].reset();
    //     $("#titlespan").text("");
    //     $("#desspan").text("");
    //     $("#tagspan").text("");
    //     $("#tag-show").css("display","none");
    //
    // }

    window.onload = function () {
        var item = window.localStorage.getItem("localS");
        if(item == "true"){
            window.close();
            window.localStorage.removeItem("localS");
        }
    }


</script>
<style>
    .d{
        margin:50px auto;
        width:80%;
    }
</style>

<body>

<div th:insert="~{menu :: menu}"></div>

<!-- 发起弹出框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">发起问题</h4>
            </div>
            <form action="/publish.action" onsubmit="return check();" id="question_freamwork">
                <div class="modal-body">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="写下你的问题..." id="title" name="title" autocomplete="off"><span id="titlespan"></span>
                    </div>
<!--                    <textarea id="description" class="form-control" rows="3" placeholder="问题背景、条件等详细信息..." name="description"></textarea><span id="desspan"></span><br>-->
                    <div class="form-group" id="md-editor">
                        <textarea id="description" style="display: none;" name="description" type="text"
                                  class="form-control" cols="30" rows="10"></textarea>
                    </div>
                    <span id="desspan"></span>
                    <script type="text/javascript">
                        $(function() {
                            var editor = editormd("md-editor", {
                                width  : "100%",
                                height : 580,
                                delay: 0,
                                watch: false,    // 是否显示预览
                                placeholder: "写下你的问题~~",
                                path   : "/md/lib/"
                            });
                        });
                    </script>
                    <span id="tagspan"></span>
                    <input class="form-control" placeholder="输入标签,以英文逗号分割~~~" name="tag" id="tag" autocomplete="off">
                    <br>

                    <!--标签的提示-->
                    <div id="tag-show" style="display: none;">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" th:each="category:${tags}">
                                <a th:href="${'#'+category.categoryName}" aria-controls="home" role="tab" data-toggle="tab" th:text="${category.categoryName}"></a>
                            </li>
                        </ul>
                        <div class="tab-content" style="margin: 10px">
                            <div role="tabpanel" th:id="${category.categoryName}" th:each="category,stat:${tags}" th:class="${stat.first ? 'tab-pane active' : 'tab-pane'}">
                                <span class="label label-info" style="margin: 5px 5px;white-space: normal;" th:each="tag:${category.tags}">
                                    <span class="glyphicon glyphicon-tags" onclick="show(this)" th:data-tag="${tag}" th:text="${tag}"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="alert alert-warning alert-dismissible" role="alert" style="display: none" id="error">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="reset()">取消</button>
                    <button type="submit" class="btn btn-success" id="btnSubmit">发布</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container-fluid main d">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <h2><span class="glyphicon glyphicon-list" aria-hidden="true"> 发现</span></h2>
            <hr>
            <div th:if="${pageBean != null}">
                <div class="media" th:each="question:${pageBean.pageRecode}">
                    <div class="media-left">
                        <a href="#" th:if="${question.user!=null}">
                            <img class="media-object img-circle" th:src="${question.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">
                            <a th:href="'/question/'+${question.id}" th:text="${question.title}"></a>
                        </h4>
                        <span class="topic-info">
                            • <sapn th:text="${question.commentCount}"></sapn> 个评论
                            • <sapn th:text="${question.viewCount}"></sapn> 次浏览 • <sapn th:text="${question.likeCount}"></sapn> 次收藏
                            • <sapn th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></sapn> 发表
                        </span>
                    </div>
                    <hr>
                </div>
            </div>

            <!-- 分页 -->
            <nav aria-label="Page navigation" th:align="right" th:if="${pageBean != null && pageBean.totalPage>1}">
                <ul class="pagination">
                    <li th:if="${pageBean.totalPage > 5 && pageBean.page - 3 > 0}">
                        <!-- 第一页 -->
                        <a aria-label="Previous" href="/?page = 1">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li  th:each="page:${pageBean.pages}">
                        <a th:href="@{/(page=${page})}" th:text="${page}"></a>
                    </li>
                    <li>
                        <!-- 最后一页 -->
                        <a th:href="@{/(page=${pageBean.totalPage})}" aria-label="Next"
                           th:if="${pageBean.totalPage > 5 && pageBean.page + 2 < pageBean.totalPage} ">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>

        </div>
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <h3>热门话题</h3>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <!--微信-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h4>WeChat</h4>
                <img class="img-thumbnail" src="/images/wechat.jpg"/>
            </div>
            <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>

    </div>
</div>

<div th:insert="~{footer :: footer}"></div>

</body>
</html>